<template>
  <div class="img-wrap">
    <div class="pan-center">
      <img alt="" :src="imageUrl" referrerPolicy="no-referrer">
      <h2>{{ authCode ? authCode : '当前状态：请使用阿里云盘App扫码登录获取AuthCode' }}</h2>
    </div>
  </div>
</template>
<script>
import { getQrCode, getQrCodeState } from '@/api/aliPan'

export default {
  name: 'AliPanIndex',
  data() {
    return {
      imageUrl: '',
      authCode: '',
      timer: null
    }
  },
  mounted() {
    this.getQrCode()
    this.getQrCodeState()
    this.timer = setInterval(this.getQrCodeState, 4000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    getQrCode() {
      getQrCode().then((res) => {
        this.imageUrl = URL.createObjectURL(res)
      })
    },
    getQrCodeState() {
      getQrCodeState().then((res) => {
        if (res.data && res.data.authCode) {
          clearInterval(this.timer)
          this.timer = null
          this.authCode = res.data.authCode
        }
      })
    }
  }
}
</script>
<!--0c936e14b4074103bbe79f2d9bd877c5-->
<style scoped lang="scss">
  .img-wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
</style>
